<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
        <style>
            a{
                text-decoration: none;
                color: #303133;
            }

        </style>
    </head>
    <body>
        <div id="app">
            <el-container>
                <el-header style="background-color: rgb(0,0,0)">
                    <h1 style="color: white;font-size: 22px">
                        YXMall商城后台管理系统
                        <span v-if="user.nickname!=null"
                              style="float: right;font-size: 15px">欢迎{{user.nickname}}回来
                    <a href="javascript:void(0)" @click="logout()">退出登录</a>
                </span>
                    </h1>
                </el-header>
                <el-container>
                    <el-aside width="200px">
                        <el-menu style="height: 500px"
                                 @select="handleSelect"
                                 default-active="2"
                                 class="el-menu-vertical-demo">

                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-s-flag"></i>
                                    <span>分类管理</span>
                                </template>
                                <el-menu-item index="1-1">分类列表</el-menu-item>
                                <el-menu-item index="1-2">添加分类</el-menu-item>
                            </el-submenu>

                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-picture"></i>
                                    <span>轮播图管理</span>
                                </template>
                                <el-menu-item index="2-1">轮播图列表</el-menu-item>
                                <el-menu-item index="2-2">添加轮播图</el-menu-item>
                            </el-submenu>

                            <el-submenu index="3">
                                <template slot="title">
                                    <i class="el-icon-shopping-cart-2"></i>
                                    <span>商品管理</span>
                                </template>
                                <el-menu-item index="3-1"><a href="/productList.html" target="content"><i class="el-icon-menu">商品管理</i></a></el-menu-item>
                                <el-menu-item index="3-2"><a href="/brandList.html" target="content"><i class="el-icon-discount">品牌管理</i></a></el-menu-item>
                            </el-submenu>

                            <el-submenu index="4">
                                <template slot="title">
                                    <i class="el-icon-shopping-cart-2"></i>
                                    <span>订单管理</span>
                                </template>
                                <el-menu-item index="4-1">已处理订单列表</el-menu-item>
                                <el-menu-item index="4-2">未处理订单列表</el-menu-item>
                            </el-submenu>

                            <el-submenu index="5">
                                <template slot="title">
                                    <i class="el-icon-shopping-cart-2"></i>
                                    <span>公告管理</span>
                                </template>
                                <el-menu-item index="5-1">公告列表</el-menu-item>
                                <el-menu-item index="5-2">添加公告</el-menu-item>
                            </el-submenu>
                        </el-menu>

                    </el-aside>
                    <el-main>
                        <el-table v-if="currentIndex=='1-1'"
                                  :data="categoryArr"
                                  style="width: 100%">
                            <!--type=index 设置这一列显示的内容为编号-->
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="分类名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column label="操作">
                                <!--scope里面装着当前行所对应的对象信息
                                scope.$index 得到当前行对应的对象在数组中的下标
                                scope.row 得到当前行对应的对象
                                -->
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="categoryUpdate(scope.row)"
                                               type="success">修改</el-button>
                                    <el-popconfirm
                                            title="您确定删除此分类吗?"
                                            @confirm="categoryDelete(scope.$index, scope.row)"
                                    >
                                        <el-button slot="reference"  size="mini"
                                                   type="danger">删除</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-table v-if="currentIndex=='2-1'"
                                  :data="bannerArr"
                                  style="width: 100%">
                            <!--type=index 设置这一列显示的内容为编号-->
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column
                                    label="轮播图"
                                    width="180">
                                <template slot-scope="scope">
                                    <!--scope.row代表当前行对应数组中的对象-->
                                    <img :src="scope.row.url" width="100%">
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <!--scope里面装着当前行所对应的对象信息
                                scope.$index 得到当前行对应的对象在数组中的下标
                                scope.row 得到当前行对应的对象
                                -->
                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="bannerUpdate(scope.row)"
                                                type="success">修改</el-button>
                                    <el-popconfirm
                                            title="您确定删除此轮播图吗?"
                                            @confirm="bannerDelete(scope.$index, scope.row)"
                                    >
                                        <el-button slot="reference"  size="mini"
                                                   type="danger">删除</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div v-if="currentIndex=='3-1'" style="width: 100%;height: 900px">
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
                                <el-breadcrumb-item><a href="/productList.html" target="content">商品列表</a></el-breadcrumb-item>
                                <el-breadcrumb-item><a href="/brandList.html" target="content">品牌列表</a></el-breadcrumb-item>
                            </el-breadcrumb>
                            <iframe src="/productList.html"
                                    name="content"
                                    width="100%"
                                    height="100%"
                                    frameborder="0"
                            ></iframe>
                        </div>
                        <div v-if="currentIndex=='3-2'" style="width: 100%;height: 100%">

                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
                                <el-breadcrumb-item><a href="/productList.html" target="content">商品列表</a></el-breadcrumb-item>
                                <el-breadcrumb-item><a href="/brandList.html" target="content">品牌</a></el-breadcrumb-item>
                            </el-breadcrumb>
                            <iframe src="/brandList.html"
                                    name="content"
                                    width="100%"
                                    height="100%"
                                    frameborder="0"
                            ></iframe>
                        </div>
                        <el-table v-if="currentIndex=='4-1'"
                                  :data="orderArr"
                                  style="width: 100%">
                            <!--type=index 设置这一列显示的内容为编号-->
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column type="index" label="订单编号"></el-table-column>
                            <el-table-column prop="date" label="提交时间"></el-table-column>
                            <el-table-column prop="user" label="用户账号"></el-table-column>
                            <el-table-column prop="price" label="订单金额"></el-table-column>
                            <el-table-column prop="state" label="订单状态"></el-table-column>
                            <el-table-column label="操作">

                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="orderSelect(scope.row)"
                                                type="success">查看订单</el-button>
                                    <el-popconfirm
                                            title="您确定删除此订单吗?"
                                            @confirm="orderDelete(scope.$index, scope.row)"
                                    >
                                        <el-button slot="reference"  size="mini"
                                                   type="danger">删除订单</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-table v-if="currentIndex=='4-2'"
                                  :data="orderArr"
                                  style="width: 100%">
                            <!--type=index 设置这一列显示的内容为编号-->
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column type="index" label="订单编号"></el-table-column>
                            <el-table-column prop="date" label="提交时间"></el-table-column>
                            <el-table-column prop="user" label="用户账号"></el-table-column>
                            <el-table-column prop="price" label="订单金额"></el-table-column>
                            <el-table-column prop="state" label="订单状态"></el-table-column>
                            <el-table-column label="操作">
                                <!--scope里面装着当前行所对应的对象信息
                                scope.$index 得到当前行对应的对象在数组中的下标
                                scope.row 得到当前行对应的对象
                                -->
                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="orderSelect(scope.row)"
                                                type="success">查看订单</el-button>
                                    <el-popconfirm
                                            title="您确定删除此订单吗?"
                                            @confirm="orderDelete(scope.$index, scope.row)"
                                    >
                                        <el-button slot="reference"  size="mini"
                                                   type="danger">删除订单</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function() {
                return {
                    isShowInsertBrand:false,
                    isShowUpdate:false,
                    isShowInsertProduct:false,
                    dialogImageUrl: '',
                    dialogVisible: false,
                    currentIndex:"1-1",
                    categoryArr:[],
                    bannerArr:[],
                    showProductArr:[],
                    productArr:[],
                    orderArr:[],
                    user:{},
                    p:{
                        title:"",
                        url:"",
                        storage:"",
                        price:"",
                        oldPrice:"",
                        content:"",
                        categoryId:"",
                        brandId:"",
                    },
                    oldUrl:"",
                    oldContent:"",
                    brandArr:[],
                    pageIndex: 1, // 第几页
                    pageSize: 3, // 每页几条数据
                    total: 0, // 总条目数
                }
            },
            methods:{
                bannerUpdate(banner){
                    location.href="/updateBanner.html?url="+banner.url+"&id="+banner.id;
                },
                bannerDelete(index,banner){
                    //发请求删除服务器的数据
                    axios.get("/banner/delete?id="+banner.id).then(function (response) {
                        //删除数组总的数据
                        v.bannerArr.splice(index,1);
                    });
                },
                categoryUpdate(category){
                    let name = prompt("请输入新的分类名称");
                    //点击取消
                    if (name==null){
                        return;
                    }
                    if (name==''){
                        v.$message.error("分类名称不能为空");
                        return;
                    }
                    //创建新对象
                    let c = {id:category.id,name:name};
                    //发出修改请求  把分类对象传递过去
                    axios.post("/category/update",c).then(function () {
                        category.name=name;
                    })
                },
                categoryDelete(index,category){
                    //发请求删除分类
                    axios.get("/category/delete?id="+category.id).then(function () {
                        //删除数组中的元素  (删除位置,删除数量)
                        v.categoryArr.splice(index,1);
                    })
                },
                handleSelect(key,keyPath){
                    if (key=='1-2'){
                        let name = prompt("请输入分类的名称");
                        //点击取消
                        if (name==null){
                            return;
                        }
                        if (name==''){
                            v.$message.error("分类名称不能为空");
                            return;
                        }
                        //发出添加分类的请求
                        axios.get("/category/insert?name="+name).then(function (response) {
                            //添加分类后把所有的分类请求回来赋值给数组
                            v.categoryArr = response.data;
                        })
                    }else if (key=='2-2'){
                        //跳转到添加轮播图页面
                        location.href="/insertBanner.html";
                    }else{
                        v.currentIndex = key;
                    }
                },
            },
            created:function () {
                //发请求获取分类信息
                axios.get("/category/select").then(function (response) {
                    v.categoryArr = response.data;
                });
                //发请求获取轮播图数据
                axios.get("/banner/select").then(function (response) {
                    v.bannerArr = response.data;
                });
                //发请求获取当前登录的用户对象
                axios.get("/currentUser").then(function (response) {
                    v.user = response.data;
                    if (v.user==""){
                        alert("请先登录!")
                        location.href="/login.html"
                    }
                })
            }
        })
    </script>
</html>